<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>购买广告</title>
    <!-- 引入字体图标 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/Homepage.css">

    <link rel="stylesheet" type="text/css" href="css/StyleForBuyPage.css"/>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

	<link rel="stylesheet" type="text/css" href="css/StyleForPayPage.css"/>
	<link rel="stylesheet" type="text/css" href="css/PopUpCSS.css"/>

</head>

<body>


<div class="navbar">
    <input type="checkbox" id="checkbox">
    <label for="checkbox" class="titleLabel">
        <i class="fa fa-bars" aria-hidden="true">
        	&nbsp;&nbsp;购买广告
        </i>
    </label>
    <ul>
        <div id="icon">
    		 <li>
	            <img :src="user.icon" alt="">
	            <span>欢迎您！{{user.nickname}}</span>
	        </li>
    	</div>
        <li>
            <a href="Manager-bubble-Homepage.html">
                <i class="fa fa-home" aria-hidden="true"></i>
                <span>首页</span>
            </a>
        </li>
        <li>
            <a href="Manager-HotAd-Page.html">
                <i class="fa fa-thumbs-up" aria-hidden="true"></i>
                <span>本月热门</span>
            </a>
        </li>
        <li>
            <a href="Manager-Info-Page.html">
                <i class="fa fa-user-circle-o" aria-hidden="true"></i>
                <span>个人中心</span>
            </a>
        </li>
        <li>
            <a href="#">
                <i class="fa fa-shopping-bag" aria-hidden="true"></i>
                <span>购买广告</span>
            </a>
        </li>
        <li>
            <a href="Manager-user-list.html">
                <i class="fa fa-users" aria-hidden="true"></i>
                <span>用户列表</span>
            </a>
        </li>
        <li>
            <a href="Manager-advlist.html">
                <i class="fa fa-sitemap" aria-hidden="true"></i>
                <span>广告列表</span>
            </a>
        </li>
        <li>
            <a href="Manager-Chat-Page.html">
                <i class="fa fa-comments" aria-hidden="true"></i>
                <span>聊天窗口</span>
            </a>
        </li>
        <li onclick="Logout()">
            <a href="javascript:void(0)">
                <i class="fa fa-sign-out" aria-hidden="true" style="transform: rotate(180deg);"></i>
                <span>退出登录</span>
            </a>
        </li>
    </ul>

    <div class="main myStyle">
        <!--我是内容区-->
        <div id="buy">
            <form id="formListener" action="AdInfo?type=buy" method="post" enctype="multipart/form-data">
                <span class="spanSty">品牌名称</span>
                <input type="text" name="ad_brand_name" id="ad_brand_name" class="input-text"/> <br/>
                <span class="spanSty">网页地址</span>
                <input type="text" name="ad_website" id="ad_website" class="input-text"/> <br/>
                <span class="spanSty">企业名称</span>
                <input type="text" name="ad_company_name" id="ad_company_name" class="input-text"/> <br/>
                <span class="spanSty">品牌描述</span>
                <input type="text" name="ad_description" class="input-text"/> <br/>
                <span class="spanSty" style="margin-right: 20px;">购买数量</span>
                <!--<input type="text" name="ad_size" id="ad_size" class="input-text" v-model="cost"/> <br />-->
                <template>
                    <el-input-number v-model="cost" @change="handleChange" :min="1" :max="10"
                                     label="描述文字"></el-input-number>
                </template>
                <span class="cost"> 价格：{{cost}} 元</span>
                <input type="hidden" name="ad_size" v-model="cost"/>
                <br/>
                <span class="spanSty">Logo上传</span>
                <input type="file" name="ad_img" id="ad_img" class="input-upload" accept="image/*"/> <br/>

                <input type="hidden" name="ad_status" value="1"/>

                <input type="button" id="btnBuy" value="购入" class="button"/>
                <!--<div class="money">当前账户余额为：{{money}} 元</div>-->
                
                <!--遮罩层-->
		        <div id="bg-cover" class="bg-cover">
		        	
		        	<div id="" class="payDiv modal">
		        		
		        		<div>
		        			
		        			<input type="button" class="btnEsc" value="×" id="btnEsc" />	
		        			
		        			<!--支付宝-->
		        			<div class="radios">
			        			<label for="alipay" class="p">
			        				<input type="radio" id="alipay" class="radioIcon" name="pay" value="alipay"/> 
				        			<img src="img/other/alipay.png" style="width: 200px;" />
			        			</label>
				        	</div>
				        	<!--微信-->
				        	<div class="radios">
				        		<label for="wechatpay" class="p">
			        				<input type="radio" id="wechatpay" class="radioIcon" name="pay" value="wechatpay"/> 
				        			<img src="img/other/wechatpay.png" style="width: 200px;" />
			        			</label>
				        	</div>
				        	<!--余额-->
				        	<div class="radios" style="float: left;">
				        		<label for="balance" class="p">
			        				<input type="radio" id="balance" class="radioIcon" name="pay" value="balance" checked="checked"/> 
				        			<div class="textDiv">余额: {{money}} 元</div>
			        			</label>
				        	</div>
				        	
				        	<div>
				        		<label for="check">
				        			<input type="checkbox" id="check" class="checkboxIcon" name="check" value="yes" />
				        			<span style="font-size: 17px;">我同意<a href="javascript:void(0)" class="aLabel">《百万圆用户协议》</a>中的条款</span>
				        		</label>
				        	</div>
		        			
		        			<div class="btnDiv">
		        					<!--<input type="submit" class="btnBtn" value="支付"/>-->
		        					<input type="button" class="btnBtn" value="支付" v-on:click="SubmitListener"/>
		        					<input type="button" class="btnBtn" value="返回" id="btnBack" />
		        			</div>
		        			
		        			<div>
		        				<span style="margin-left: 15px;">点击购买将花费 {{cost}} 元。</span> <br />
		        				<span style="margin-left: 15px;">下单之前，您有机会检查您的订单。</span>
		        			</div>
		        			
		        		</div>
		        		
		        	</div>
		
		        </div>
                <!--遮罩层-->
 
            </form>
            
        </div>
        
    </div>
</div>
</body>

<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script src="//unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script src="js/GetInfo.js"></script>
<script src="js/jquery-1.4.2.js"></script>

<script>
    function Logout() {
        var flag = window.confirm("确定退出登录吗？");
        if (flag) {
            window.location.href = "AdInfo?type=logout";
        }
    }
    
    $(function() {
    	$("#btnBuy").click(function() {
    		if ($("#ad_brand_name").val() == "") {
                alert("品牌名称不能为空！")
            } else if ($("#ad_website").val() == "") {
                alert("网站地址不能为空！")
            } else if ($("#ad_company_name").val() == "") {
                alert("企业名称不能为空！")
            } else if ($("#ad_img").val() == "") {
            	alert("请选择一张图片！")
            } else {
            	$("#bg-cover").css("display", "block");
            }
    		
    	})
    	
    	$("#btnBack").click(function() {
    		$("#bg-cover").css("display", "none");
    	})
    	
    	$("#btnEsc").click(function() {
    		$("#bg-cover").css("display", "none");
    	})

    })
    
    new Vue({
        el: "#buy",
        data: {
            money: "",
            cost: 1,
        },
        methods: {
            handleChange(value) {
//	    		console.log(value);
            },
            GetMoney() {
                var _this = this;
                axios({
                    method: "get",
                    url: "http://localhost:8080/MillionYuan/User?type=money"

                }).then(function (resp) {
                    _this.money = resp.data;
                })
            },
            SubmitListener() {
            	var _this = this;
                var form = document.getElementById('formListener');
	    		if (!$("#check").is(':checked')) {
	        		alert("请勾选用户协议！");
	        	} else if ($("input:radio[name='pay']:checked").val() == "balance") {
	        		if (parseInt(_this.money) >= _this.cost) {
	                    alert("购入成功！");
	                    var form = document.getElementById('formListener');
	                    form.submit();
	                    
	                } else {
	                    alert("余额不足，购入失败！")
	                }
	        		
	        	} else {
	        		alert("暂未开通微信/支付宝方式付款，请稍后再试！");
	        	}

            }
        },
        mounted() {
            this.GetMoney();
//          this.SubmitListener();
        }
   })


</script>


</html>